<template>
	<view class="content">
		<uni-nav-bar left-icon="left"  :statusBar="true" titleSize="30px" leftText="返回" @clickLeft="back" rightText="保存"  @clickRight="addFn"  title="地图" :fixed="true" backgroundColor="#3286ed" color="#fff"/>
		<!-- 标题栏 -->
		<u-search v-model.enter="value" @search="searchFn"  @custom="customFn"   @change="inputBtn" style="height;40px;background-color: #fff;padding: 10px;"   :clearabled="true" showAction  @clear="clearFn"  height='30' placeholder="请输入位置" shape="square" actionText='取消'></u-search>
		<scroll-view v-if="addressListShow==true" :style="scrollStyle" :scroll-y="true">
			<!-- 搜索出来的地址 -->
			<view class="search_list_view">
				<view  v-for="(item,index) in addressList" :key="item.id"  @click="chooseIs(index,item)" class="addres_item">
					<text class="text_name">{{item.name}}</text><br />
					<text class="text_address">{{item.district+item.address}}</text>
				</view>
			</view>
		</scroll-view>
		
		<!-- 地图 -->
		<map id="map" ref="map" :markers="markers" :controls="controls" :scale="scale"  @regionchange="changeMap"
			:longitude="location.longitude" :latitude="location.latitude" style="width: 100%;height: 600px;">
			<!-- 地图中心点标记 -->
			<!-- <image class="cover_marker" :style="{'left':mapWAH.width/2-10+'px','top':mapWAH.height/2-30+'px'}"></image> -->
			<!-- 定位控件 -->
			<!-- <image class="do_get_location"  @click="doCheckPermission"></image> -->
		</map>
		<!-- <scroll-view  :style="scrollStyle" :scroll-y="true">
			<view class="search_list_button">
				<view  v-for="(item,index) in addressList" :key="item.id"  @click="chooseIs(index,item)" class="addres_item">
					<text class="text_name">{{item.name}}</text><br />
					<text class="text_address">{{item.district+item.address}}</text>
				</view>
			</view>
		</scroll-view> -->
	</view>
</template>
 
<script>
	import amapFile from '@/libs/amap-wx.130.js'
	export default {
		data() {
			return {
				scrollStyle: {
					'width': '393px',
					'height': '330px'
				},
				markers:[{
					latitude:'',
					longitude:'',
					title:'123',
					iconPath:'../../static/images/address.png',
					width:30,
					height:30,
					
				}],
				controls: [],
				scale: 16,
				location: {},
				value:'',
				addressList:[],
				addressListShow:false,
				address:'',
				
			}
		},
		beforeCreate(){
			var that =this
			uni.getLocation({
				 type: 'gcj02',
				 geocode:true,
					success: function (res) {
						console.log(res)
						that.location=res
						that.markers[0].latitude=that.location.latitude
						that.markers[0].longitude=that.location.longitude
						
					}
			})
		},
		onLoad(e) {
		   var that =this
		   uni.getLocation({
		   	 type: 'gcj02',
		   	 geocode:true,
		   		success: function (res) {
		   			console.log(res)
		   			that.location=res
					that.markers[0].latitude=that.location.latitude
					that.markers[0].longitude=that.location.longitude
		   			
		   		}
		   })
		},
		
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			addFn(){
				console.log(this.address);
				let pages = getCurrentPages()
				let prevPage = pages[pages.length -2] 
				 prevPage.$vm.getAddress(this.address)
				uni.navigateBack({
					delta:1
				})
			},
			inputBtn(e){
				console.log(e)
				
					var that = this
				    var keywords = e 
					var location =that.location.latitude+","+ that.location.longitude
					// console.log(location)
				    var myAmapFun = new amapFile.AMapWX({key:'cd6a8338773fdec08821b007df95f897'})
					myAmapFun.getInputtips({
					     keywords: keywords,
					     location: location,
					     success: function(data){
					         // console.log(data)
							  that.addressListShow=true
							  that.addressList=data.tips
					       }
					     })
				
			},
			chooseIs(index,item){
				let arr=[]
				console.log(index,item)
				this.addressListShow=false
				this.address=item.district+item.name
				console.log(this.address);
				arr=item.location.split(',')
				// console.log(arr);
				this.location.longitude=arr[0]
				this.location.latitude=arr[1]
				// console.log(this.location.longitude)
				// console.log(this.location.latitude)
			},
			// 清除输入框的
			clearFn(){
				this.loading=true
				this.value=''
				this.addressList=[]
			},
			// 右侧控件
			customFn(){
				this.value=''
				this.addressList=[]
				this.addressListShow=false
				this.loading=true
				uni.switchTab({
					url:'/pages/index'
				})
			},
			searchFn(val){
				// // console.log(val)
				// let arr=[]
				// this.value=this.addressList[0].name
				// arr=this.addressList[0].location.split(',')
				// this.location.longitude=arr[0]
				// this.location.latitude=arr[1]
				// this.addressList=[]
				// this.addressListShow=false
				// console.log(this.addressList)
				// console.log(this.addressListShow)
			},
			// 拖拽
			changeMap(e){
				console.log(e);
				var that =this
				
				let mapCtx =uni.createMapContext('map',this);
				 mapCtx.getCenterLocation({
				  success:res=> {
					console.log(res)
						// 当前中心经纬度位置
						that.location.longitude=res.longitude
						that.location.latitude=res.latitude
						that.markers[0].latitude=res.latitude
						that.markers[0].longitude=res.longitude
				  }
				})
			}
		}
		
		
	}
</script>
 
<style lang="scss">
	.content {
		flex: 1;
	}
	/* 标题 */
	.tool-bar-fixed {
		background-color: #f98f34;
		top: 0;
		left: 0;
		right: 0;
		padding: 20px 40px;
	}
 
	.search_view {
		flex-direction: row;
		background-color: #FFFFFF;
		border-radius: 10px;
	}
 
	.search_input {
		height: 20px;
		flex: 1;
		line-height: 20px;
		font-size: 14px;
	}
 
	.city_text_color {
		color: #f98f34;
	}
 
	.city_text {
		margin-left: 15px;
		margin-right: 10px;
		height: 50px;
		line-height: 50px;
	}
 
 
 
	.search_inputp {
		height: 50px;
		line-height: 50px;
		flex: 1;
		font-size: 14wx;
	}
 
	.search_icon {
		width: 70px;
		height: 40px;
		margin: 15px;
	}
 
	/* 搜索列表 */
	.search_list_view {
		top: 1px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		background-color: #FFFFFF;
	}
 
	.addres_item {
		border-color: #F98F34;
		border-bottom-width: 1px;
		padding: 5px 20px;
		border-bottom: solid 1px #c3c3c3;
	}
 
	.text_name {
		font-size: 14px;
		line-height: 20px;
	}
 
	.text_address {
		font-size: 12px;
		line-height: 15px;
	}
 
	.choose_icon {
		position: absolute;
		top: 30px;
		right: 30px;
		width: 50px;
		height: 50px;
	}
 
	/* 中心点 */
	.cover_marker {
		position: absolute;
		width: 20px;
		height: 20px;
	}
 
	/* 定位 */
	.do_get_location {
		position: absolute;
		width: 40px;
		height: 40px;
		right: 20px;
		bottom: 20px;
	}
 
	/* 底部下单 */
	.main_bottom {
		bottom: 0px;
		left: 0px;
		right: 0px;
		background-color: #FFFFFF;
		height: 200rpx;
	}
 
	.choose_address {
		margin: 20px 40px 20px 40px;
		border-style: solid;
		border-width: 1px;
		border-color: #ff0000;
		border-radius: 5px;
		padding: 10px;
	}
 
	.add_text {
		font-size: 25px;
		line-height: 35px;
	}
 
	.uni-btn-v {
		position: absolute;
		left: 40px;
		right: 40px;
		bottom: 20px;
		background-color: #F98F34;
		border-radius: 10px;
		height: 80px;
		line-height: 80px;
		font-size: 34px;
		color: #FFFFFF;
		text-align: center;
	}
 
	
</style>